<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet"/>
    <script src="js/mui.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/fastclick.js"></script>
    <script src="js/api.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        .user-config {
            position: absolute;
            right: 1rem;
            top: 4rem;
        }

        html, body {
            background-color: #F3F3F3 !important;
        }

        .xlb-loading {
            position: absolute;
            top: 42%;
            left: 50%;
            transform: translateX(-50%);
        }

        .msg-dot {
            padding: .3rem;
            border-radius: .3rem;
            background-color: #EF6060;
            position: absolute;
            top: 0;
            left: 1.2rem;
        }

        .nav-list-item {
            position: relative;
        }
    </style>
</head>
<body>
<div id="app">

    <div class="ls-nav">
        <div class="nav-list-outer">
            <div @click="goPage(1)" :class="{focus:chooseIndex == 1 }">
                <img v-show="chooseIndex == 1" src="img/index/ic_tab_order_press@3x.png" alt="">
                <img v-show="chooseIndex != 1" src="img/index/ic_tab_order_normal@3x.png" alt="">
                订单
            </div>
            <div class="nav-list-item" @click="goPage(2)" :class="{focus:chooseIndex == 2 }">
                <img v-show="chooseIndex == 2" src="img/index/ic_tab_news_press@3x.png" alt="">
                <img v-show="chooseIndex != 2" src="img/index/ic_tab_news_normal@3x.png" alt="">
                <div v-show="messageFlag" class="msg-dot"></div>
                消息
            </div>
            <div @click="goPage(3)" :class="{focus:chooseIndex == 3 }">
                <img v-show="chooseIndex == 3" src="img/index/ic_tab_me_press@3x.png" alt="">
                <img v-show="chooseIndex != 3" src="img/index/ic_tab_me_normal@3x.png" alt="">
                个人
            </div>
            <div v-show="chooseIndex == 3" @click="goPage(4)" class="user-config" @click="goPage(3)"><img
                    src="img/common/btn_me_set@3x.png" alt=""></div>
        </div>
    </div>
    <div style="height: 1.5rem;background-color: #65c459"></div>
    <div class="xlb-loading">
        <img src="img/loading.gif" alt="">
    </div>

</div>

<script>
    var w = document.documentElement.clientWidth, fz = w / 36;
    //窗口参数
    var fullStyles = {
        top: '0px'
    };
    mui.init({
        swipeBack: false,
        preloadLimit: 15//预加载窗口数量限制(一旦超出,先进先出)默认不限制

    });
    /**
     * 子页面样式参数
     * */
    var subPageStyle = {
        top: fz * 7 + 'px',
        bottom: '0px'
    }

    /**
     * 初始化预加载页面
     */
    function initPages() {
        preloadPages([
            // {
            //     url: 'pages/order/list.html',
            //     id: 'pages/order/list.html',
            //     styles: subPageStyle
            // },
            {
                url: 'pages/user/index.html',
                id: 'pages/user/index.html',
                styles: subPageStyle
            },
            {
                url: 'pages/message/index.html',
                id: 'pages/message/index.html',
                styles: subPageStyle
            },
            {
                url: 'pages/login/login.html',
                id: 'pages/login/login.html',
                styles: fullStyles
            }

        ]);
    };

    function preloadPages(listPages) {
        for (var index in listPages) {
            mui.preload({
                url: listPages[index].url,
                id: listPages[index].id,
                styles: listPages[index].styles,
            }, false);
        }

    }


    mui.plusReady(function () {
        /**
         * 监听页面切换
         */
        // initListTab();
        /**
         * 预加载页面
         */
        initPages();
        //创建当前页面
        var self = plus.webview.currentWebview();
        self.show();
        var sub = plus.webview.create("pages/order/list.html", "pages/order/list.html", subPageStyle);
        sub.show();

        /**
         * 监听在线消息事件
         */
        plus.push.addEventListener("receive", function (msg) {
            vm.messageFlag = true;
        }, false);
    });


        /*
             * 首页返回键处理
             * 处理逻辑：1秒内，连续两次按返回键，则退出应用；
             * from:官方
             */
        var first = null;
        mui.back = function () {
            //首次按键，提示‘再按一次退出应用’
            if (!first) {
                first = new Date().getTime();
                mui.toast('再按一次退出应用');
                return false;
                setTimeout(function () {
                    first = null;
                }, 1000);
            } else {
                if (new Date().getTime() - first < 1000) {
                    plus.runtime.quit();
                } else {
                    return false;
                }
            }
        };

</script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: '首页',
            chooseIndex: 1,
            messageFlag: false
        },
        methods: {
            goPage: function (type) {

                // 防止上部页面和下部内容页面跳转混乱
                var h = plus.webview.getTopWebview().id;
                if (mainPages.indexOf(h) < 0) {
                    return
                }
                // 防止重复点击
                if (this.chooseIndex == type) {
                    if (type == 3) {
                        this.messageFlag = false;
                    }
                    return;
                }
                this.chooseIndex = type;
                if (type == 1) {
                    this.messageFlag = false;
                    changePage('pages/order/list.html')
                } else if (type == 2) {
                    changePage('pages/message/index.html')
                } else if (type == 3) {
                    this.messageFlag = false;
                    changePage('pages/user/index.html')
                } else if (type == 4) {
                    this.chooseIndex = 3;
                    redirect('pages/user/setting.html')
                }
            }
        }
    });

    //监听初始化
    document.addEventListener('selectedIndex', function (data) {
        console.log('选择订单');
        vm.chooseIndex = 1;
    })
    // 监听plusready事件
    document.addEventListener( "plusready", function(){
        // 检查版本更新
        checkVersionNew();
    }, false );


</script>
</body>
</html>